<template>
  <div class="max-panel" :style="defaultTheme">
    <div v-if="title" class="max-head" @click="click">
      {{ title }}
    </div>
    <transition name="fade">
      <div class="max-body" v-show="show">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
import {defineComponent, ref, reactive} from 'vue';

export default defineComponent({
  name: 'maxPanel',
  setup(props, context) {
    /**
     * 变量列表：
     * defaultTheme：默认主题配置
     */
    const defaultTheme = reactive({
      '--firstColor': '#fff',
      '--secondColor': '#fff',
      '--thirdColor': '#fff',
      '--fontColor': '#595f6e',
      '--backGroundColor': '#f0f0f0'
    })
    const show = ref(true);
    /**
     * 方法列表：
     * init：初始化
     * open：展开/收拢
     */
    const init = () => {
      Object.assign(defaultTheme, props.theme);
      show.value = props.open;
    }
    const click = () => {
      if (props.openable) {
        show.value = !show.value;
        context.emit("update:open", show.value);
      }
    }
    init();
    return {
      defaultTheme,
      show,
      click
    };
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    open: {
      type: Boolean,
      default: true
    },
    openable: {
      type: Boolean,
      default: true
    },
    theme: {
      type: Object,
      default: {}
    }
  }
});
</script>

<style scoped>
.max-panel {
  margin: 8px;
  border: 1px solid var(--backGroundColor);
  background: var(--thirdColor);
}

.max-head {
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  color: var(--fontColor);
  background: var(--firstColor);
  padding: 8px 24px;
  border-bottom: 1px solid var(--backGroundColor);
}

.max-head:hover {
  background: var(--secondColor);
}

.max-body{
  padding: 12px 24px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>